<!DOCTYPE html>
<html>
<head>
	<title>发布订阅-defineObject</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="app">
		<div>
			<p>我是{{foo.a}}</p>
			<div>
				<p>哈哈哈</p>
			</div>
			<div @click="test">{{foo.b}}</div>
			<div>
				<input type="" name="" :value="foo.b" @input="input">
			</div>
		</div>
		<ul>
			<li v-for="l in lists">{{l.a}}</li>
		</ul>
	</div>
</body>
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script src="compile.js"></script>
<script>
function init({el, data, methods}) {
	const compiler = compile({el, data, methods})
	observe({data, onDataChange: compiler.onDataChange.bind(compiler)})
}

let data = {
  name: 'boom',
  foo: {
    a: 1,
    b: 2
  },
  lists:['a', 'b', 'c']
}
let methods = {
	test: () => data.foo.b = 'Im successfully changed!',
	input: (e) => data.foo.b = e.target.value
}
const el = document.getElementById('app')
init({el, data, methods})
setTimeout(()=>{
	data.lists[2] = 'change'
}, 1000)
</script>
</html>